<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script src="js/jsencrypt.js" type="text/javascript"></script>
	
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
	<script>
		let encrypt = new JSEncrypt();
		$.get('key', null, function (data) {
			encrypt.setPublicKey(data);
		});
		let loginWithPassword = true;
		$(() => {
			
			const verifyCodeUrl = $('#verifyCodeImg').attr('src');
			$('#submitButton').on('click', (e) => {
				e.preventDefault();
				let code = $('#verifyCodeInput').val();
				/*Verify*/
				$.get('Verify',
						'verifyCode=' + code,
						(data, status) => {
							if (data !== 'true') {
								alert('Wrong Verify Code!');
								$('#verifyCodeImg').click();
							}
							else if (data === 'true') {
								if (loginWithPassword) {
									/*login*/
									$.post('Login',
											{
												email: $('#email').val(),
												password: encrypt.encrypt($('#password').val()),
												verifyCode: $('#verifyCodeInput').val()
											},
											(data, status) => {
												if (data === 'failed') {
													alert('Wrong Email Address or Password!');
													$('#verifyCodeImg').click();
													$('#password').select();
												}
												
												/*redirect*/
												else if (data === 'Main') {
													alert('Login Success');
													$(window).attr('location', data);
												}
												else {
													alert(data);
												}
											}
									);
								}
								else {
									$.post('Login', {
												email: $('#email').val(),
												mailVerifyCode: $('#mailVerifyCode').val(),
												verifyCode: $('#verifyCodeInput').val()
											},
											function (data, status) {
												if (data === 'failed') {
													alert('Wrong Email Address or Email Verify Code!');
													$('#verifyCodeImg').click();
													$('#password').select();
												}
												/*redirect*/
												else if (data === 'Main') {
													alert('Login Success');
													$(window).attr('location', data);
												}
												else {
													alert(data);
												}
											}
									);
								}
								
								
							}
							else {
								alert('Unknown Wrong');
							}
						});
				
				
			});
			//刷新
			$('#verifyCodeImg').on('click', () => {
				$('#verifyCodeImg').attr('src', verifyCodeUrl + '?' + Math.random());
				$('#verifyCodeInput').val('');
			});
			
			$('#changeLoginMode').on('click', function (e) {
				e.preventDefault();
				loginWithPassword = !loginWithPassword;
				if (loginWithPassword) {
					$('#changeLoginModeLabel').text('Want to login with email verify code? Click');
					$('#loginWithEmailDiv').css('display', 'none');
					$('#loginWithPasswordDiv').css('display', 'block');
					$('#sendVerifyCodeButton').attr('disabled', 'disabled');
				}
				else {
					$('#changeLoginModeLabel').text('Want to login with password? Click');
					$('#loginWithEmailDiv').css('display', 'block');
					$('#loginWithPasswordDiv').css('display', 'none');
					$('#sendVerifyCodeButton').attr('disabled', false);
				}
			});
			
			$('#sendVerifyCodeButton').on('click', function (e) {
				$('#sendVerifyCodeButton').attr('disabled', 'disabled');
				e.preventDefault();
				$.post('account/' + $('#email').val(), null, function (data, status) {
					if (data.status === 200) {
						alert('发送成功');
					}
					else {
						alert(data.error);
					}
					$('#sendVerifyCodeButton').attr('disabled', false);
				});
				
			});
			
		});
	</script>
</head>
<body>
<div th:include="common/top.html::top"></div>
<div id="content">
	<div id="Catalog">
		<form action="Login" autocomplete="off" method="post">
			<p style="text-align: center">Please enter your e-mail address and password.</p>
			<!--<table>
				<tr>
					<td><label for="email"> Email Address:</label></td>
					<td><input type="text" name="email" id="email"/></td>
				</tr>
				<tr>
					<td><label for="password"> Password:</label></td>
					<td><input type="password" name="password" id="password"/></td>
				</tr>
				<tr>
					<td><label for="verifyCodeInput"> Verify Code</label> <img src="VerifyCode" alt="Verify Code" id="verifyCodeImg"></td>
					<td><input type="text" name="userVerifyCode" id="verifyCodeInput"></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" name="login" value="Login" class="button" id="submitButton"/></td>
				</tr>
			</table>
			-->
			<div class="MyContainer" style="width: 500px; text-align: center">
				<div style="width: 400px; display: inline-block;">
					<div class="MyContainer grey">
						<label class="hint" for="email">Email:</label>
						<span class="loginInfo"><input id="email" name="email" type="email"></span>
					</div>
					<div class="MyContainer grey" id="loginWithPasswordDiv">
						<label class="hint" for="password">Password:</label>
						<span class="loginInfo"><input id="password" name="password" type="password"></span>
					</div>
					<div class="MyContainer grey" id="loginWithEmailDiv" style="display: none">
						<label class="hint" for="mailVerifyCode">E-Mail Verify Code:</label>
						<span class="loginInfo"><input id="mailVerifyCode" name="mailVerifyCode" type="text"/></span>
						<button disabled="disabled" id="sendVerifyCodeButton">Send Verify Code</button>
					</div>
					<div class="MyContainer grey">
						<label id="changeLoginModeLabel">Want to login with Email Verify Code? Click</label> <a
							href="#" id="changeLoginMode">here</a> <br/>
						Want to login with telephone? Click <a href="loginphone">here</a>
					
					</div>
					<div class="MyContainer grey">
						<label class="hint" for="verifyCodeInput"> Verify Code</label>
						<span class="loginInfo" style="width: 24%"><img alt="Verify Code" id="verifyCodeImg"
																		src="VerifyCode"
																		style="height: 18px;"></span>
						<span class="loginInfo" style="width: 44%"><input id="verifyCodeInput" name="userVerifyCode"
																		  type="text"></span>
					</div>
					<div class="MyContainer grey">
						<input class="button" id="submitButton" name="login" type="submit" value="Login"/>
					</div>
				</div>
				<p class="red" id="availableStatus" style="position: absolute;width: 133px;"></p>
			</div>
		</form>
		
		Need an account? <a href="RegisterPage">Register Now!</a>
	
	</div>
</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>
	